<template>
	<view class="main">
		 <view class="title-box">
			 <view class=" title">
			 	<image style="width:28rpx ;height: 28rpx;margin-right: 15rpx;" src="https://qny.yijiumy.com/icon_shangcheng.png" mode=""></image> 
			文通冰室（东莞南城店）
			 </view>
		 	<view class="">
		 		进店看看<image style="width:16rpx ;height: 16rpx;margin-bottom: 5rpx;" src="https://qny.yijiumy.com/icon_xia.png"  mode=""></image>
		 	</view>
		 </view>
		 <view class="hot-goods">
		 	<view class="hot-list" v-for="(item,index) in list">
		 		<view class="img-box">
		 			<image :src="item.image" style="width: 202rpx;height: 202rpx;"></image>
		 		</view>
				<view class="text-box">
					{{item.title}}
				</view>
				<view class="price-numder">
					￥<text class="price">{{item.price}}</text>.00
				</view>
		 	</view>
		 </view>
	</view>
</template>

<script>
		export default {
			data() {
				return {
					list: [
						{
							image:"http://qny.yijiumy.com/整箱.jpg",
							title:'梅尔菲赤霞珠&梅洛/荣羊干红葡萄酒',
							price:880
						},
						{
							image:"http://qny.yijiumy.com/整箱.jpg",
							title:'梅尔菲赤霞珠&梅洛/荣羊干红葡萄酒',
							price:880
						},
						{
							image:"http://qny.yijiumy.com/整箱.jpg",
							title:'梅尔菲赤霞珠&梅洛/荣羊干红葡萄酒',
							price:880
						}
					]
				}
			},
		}
</script>

<style scoped lang="less">
	.main{
		width: 688rpx;
		height: 420rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 15rpx;
		margin: 20rpx auto;
	}
	.hot-goods{
		display: flex;
		justify-content: space-between;
		.hot-list{
			width: 31%;
		}
	}
	.title-box{
		display: flex;
		justify-content: space-between;
		margin-bottom: 15rpx;
		.title{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			line-height: 36rpx;
		}
	}
	.text-box{
		overflow:hidden; 
		text-overflow:ellipsis;
		display:-webkit-box; 
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2; 
	}
	.price-numder{
		color: #9f2b45;
	}
	.price{
		// width: 118rpx;
		height: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 33rpx;
		color: #9f2b45;		
		}
	.img{

		vertical-align: middle;
		margin-bottom: 10rpx;
	}
</style>